
    <div class="container" id="line">
        <div class="row">
            <div class="col-md-8">
                <article>
                    <h2>Line Chart with fixed Aspect Ratio</h2>
                    <div class="js-line-chart-container line-chart-container card--chart"></div>
                    <div class="js-line-brush-chart-container card--chart"></div>
                    <p class="js-date-range date-range is-hidden">Selected from <span class="js-start-date"></span> to <span class="js-end-date"></span></p>
                </article>
            </div>
            <div class="col-md-4 sidebar">
                <h3>The code</h3>
                <pre><code class="language-javascript">
lineChart
    .isAnimated(true)
    .aspectRatio(0.5)
    .grid('horizontal')
    .tooltipThreshold(600)
    .width(containerWidth)
    .dateLabel('fullDate')
    .on('customMouseOver', chartTooltip.show)
    .on('customMouseMove', chartTooltip.update)
    .on('customMouseOut', chartTooltip.hide);

container.datum(dataset).call(lineChart);
                </code></pre>
                <h4>Colors</h4>
                <label class="control-label">You can also check other color schemas:</label>
                <div class="js-color-selector-container"></div>
                <h4>Data Input</h4>
                <p>Check the <a href="/britecharts/global.html#LineChartData__anchor">data input schema</a> of this chart.</p>
                <h4>Export Chart</h4>
                <p>You can also export this chart by pressing: <input id="button" type="button" value="Export" class="btn btn-sm btn-primary" /></p>
                <h4>Demo Code</h4>
                <p>Read the whole code of this demo <a href="https://github.com/eventbrite/britecharts/blob/master/demos/src/demo-line.js">in github</a></p>
            </div>
        </div>

        <div class="row">
            <div class="col-md-8">
                <article>
                    <h2>Line Chart with a single data source</h2>
                    <div class="britechart js-single-line-chart-container card--chart"></div>
                    <p>This is the same chart as above, but when there is a single data source we apply a gradient to the line to give it a little flair.</p>
                    <p>This chart has a fixed height like the one below.</p>
                </article>
            </div>
            <div class="col-md-4 sidebar">
                <h3>The code</h3>
                <pre><code class="language-javascript">
lineChart
    .tooltipThreshold(600)
    .height(300)
    .lineCurve('basis')
    .grid('vertical')
    .width(containerWidth);

container.datum(dataset).call(lineChart);
                </code></pre>
                <h3>Export Chart</h3>
                <p>You can also export this chart by pressing: <input id="button2" type="button" value="Export" class="btn btn-sm btn-primary" /></p>
                <h4>Demo Code</h4>
                <p>Read the whole code of this demo <a href="https://github.com/eventbrite/britecharts/blob/master/demos/src/demo-line.js">in github</a></p>
            </div>
        </div>

        <div class="row">
            <div class="col-md-8">
                <article>
                    <h2>Line Chart with Fixed Height</h2>
                    <div class="js-fixed-line-chart-container card--chart"></div>
                    <p>In this case, we have set a <strong>fixed height</strong> on the chart, as we are currently doing on the Sales report:</p>
                </article>
            </div>
            <div class="col-md-4 sidebar">
                <h3>The code</h3>
                <pre><code class="language-javascript">
lineChart
    .tooltipThreshold(600)
    .height(300)
    .width(containerWidth)
    .grid('full');

container.datum(dataset).call(lineChart);
                </code></pre>
                <h4>Demo Code</h4>
                <p>Read the whole code of this demo <a href="https://github.com/eventbrite/britecharts/blob/master/demos/src/demo-line.js">in github</a></p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <article>
                    <a name="loading-state"></a>
                    <h2 class="tutorial__heading">Loading State</h2>
                    <div class="js-loading-container"></div>
                </article>
            </div>
            <div class="col-md-4 sidebar">
                <h3>The code</h3>
                <pre><code class="language-javascript">
container.html(lineChart.loadingState())
                </code></pre>

                <h4>Demo Code</h4>
                <p>Read the whole code of this demo <a href="https://github.com/eventbrite/britecharts/blob/master/demos/src/demo-line.js">in github</a></p>
            </div>
        </div>
    </div>

